<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="设备名称" prop="devName">
        <el-input v-model="queryParams.devName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="设备号" prop="sn">
        <el-input v-model="queryParams.sn" placeholder="请输入设备号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="二维码号" prop="qrId">
        <el-input v-model="queryParams.qrId" placeholder="请输入二维码号" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="设备状态" prop="devStatus">
        <el-select @change="getList" v-model="queryParams.devStatus" placeholder="请选择设备状态" clearable>
          <el-option v-for="dict in dev_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备版本" prop="version">
        <el-select @change="getList" v-model="queryParams.version" placeholder="请选择设备版本" clearable>
          <el-option v-for="dict in dev_version" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属电站" prop="version">
        <el-select @change="getList" v-model="queryParams.stationId" placeholder="请选择所属电站" clearable filterable remote
          :remote-method="remoteMethod">
          <el-option v-for="(item, key) in station_list" :key="key" :label="item.stationName" :value="item.stationId" />
          <div class="select-pagination">
            <pagination :layout="'total, prev, next'" v-show="station_total > 0" :total="station_total"
              v-model:page="queryStat.pageNum" v-model:limit="queryStat.pageSize" @pagination="getStation" />
          </div>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['dev:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleBatchAdd" v-hasPermi="['dev:batchAdd']">批量新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['dev:edit']">
          修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['dev:remove']">删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Download" :disabled="multiple" @click="handleExportMulti"
          v-hasPermi="['dev:export']">批量生成二维码
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-upload class="upload-demo" ref="upload" accept=".xls,.xlsx" action="" :on-change="uploadExcel"
          :show-file-list="false" :auto-upload="false">
          <el-button type="primary" plain icon="Upload" v-hasPermi="['dev:export']">xlsx生成二维码</el-button>
        </el-upload>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Download" @click="handleExportAll" v-hasPermi="['dev:export']">全部生成二维码
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Upload" @click="upgradeDev" v-hasPermi="['dev:upgrade']">批量升级
        </el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="设备名称" align="center" prop="devName" />
      <el-table-column label="设备号" align="center" prop="sn" />
      <el-table-column label="二维码" align="center">
        <template #default="scope">
          <el-button icon="Menu" @click="tinyQrcodeRead(scope.row)" circle />
        </template>
      </el-table-column>
      <el-table-column label="设备版本" align="center" prop="version">
        <template #default="scope">
          <dict-tag :options="dev_version" :value="scope.row.version" />
        </template>
      </el-table-column>
      <el-table-column label="设备状态" align="center" prop="devStatus">
        <template #default="scope">
          <dict-tag :options="dev_status" :value="scope.row.devStatus" />
        </template>
      </el-table-column>
      <el-table-column label="远程控制" align="center">
        <template #default="scope">
          <el-button type="primary" icon="Setting" @click="gotoControl(scope.row)" circle />
        </template>
      </el-table-column>
      <el-table-column label="启用/禁用" align="center" prop="delFlag">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.delFlag == '0'">正常</el-tag>
          <el-tag type="danger" v-if="scope.row.delFlag == '1'">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="设备时间" align="center" prop="onlineTime">
        <template #default="scope">
          <span v-if="scope.row.devStatus == 'OFF'">离线</span>
          <span v-if="scope.row.devStatus == 'ON'">在线</span>
          <span v-if="scope.row.devStatus == 'ERROR'">故障</span>
          <span>时间：{{ scope.row.onlineTime || "-" }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="收益" align="center" prop="earnings">
        <template #default="scope">
          <span>{{ scope.row.earnings }}元</span>
        </template>
      </el-table-column> -->
      <el-table-column label="电站设置" align="center" class-name="flex_group">
        <template #default="scope">
          <el-button :type="scope.row.stationId == -1 || scope.row.stationId == null ? 'primary' : 'warning'"
            @click="handleBind(scope.row)">
            <span>
              {{ scope.row.stationId == -1 || scope.row.stationId == null ? "绑定电站" : "更新电站" }}
            </span>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="参数设置" align="center" class-name="flex_group">
        <template #default="scope">
          <div v-if="scope.row.devStatus == 'ON'">
            <div>
              <el-button @click="attrRead(scope.row)">
                <span>充电参数</span>
              </el-button>
            </div>
            <div v-if="scope.row.version == '104'">
              <el-button @click="attrProdRead(scope.row)">
                <span>保护参数</span>
              </el-button>
            </div>
            <div>
              <el-button type="primary" @click="cardSet(scope.row)">
                <span>刷卡设置</span>
              </el-button>
            </div>
            <div>
              <el-button type="primary" @click="powSet(scope.row)">
                <span>分档功率</span>
              </el-button>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="创建信息" align="center">
        <template #default="scope">
          <span class="modify">{{ scope.row.createBy || "-" }}</span>
          <span class="modify">{{
            parseTime(scope.row.createTime, "{y}-{m}-{d}")
          }}</span>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="更新信息" align="center">
        <template #default="scope">
          <span class="modify">{{ scope.row.updateBy || "-" }}</span>
          <span class="modify">{{
            parseTime(scope.row.updateTime, "{y}-{m}-{d}")
          }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link icon="Document" @click="handleInfo(scope.row)" v-hasPermi="['dev:query']">详情</el-button>
          <el-button link icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['dev:edit']">修改</el-button>
          <el-button link icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['dev:remove']">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改设备对话框 -->
    <el-dialog :title="title" v-model="open" width="600px" append-to-body :close-on-click-modal="false">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="设备名称" prop="devName">
          <el-input v-model="form.devName" placeholder="请输入设备名称" />
        </el-form-item>
        <el-form-item label="设备号" prop="sn">
          <el-input v-model="form.sn" placeholder="请输入设备号" />
        </el-form-item>
        <el-form-item label="设备状态" prop="devStatus">
          <el-radio-group v-model="form.devStatus">
            <el-radio v-for="dict in dev_status" :key="dict.value" :label="dict.value">{{
              dict.label
            }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="设备版本" prop="version">
          <el-radio-group v-model="form.version">
            <el-radio v-for="dict in dev_version" :key="dict.value" :label="dict.value">{{
              dict.label
            }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="启用/禁用" prop="delFlag">
          <el-switch active-text="正常" active-color="#085" :active-value="0" inactive-text="禁用" inactive-color="#f00"
            :inactive-value="1" v-model="form.delFlag"></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <canvas id="canvas" :width="0" :height="0"></canvas>
    <div v-show="false">
      <div v-for="(item, key) in qr_id_list" :key="key">
        <canvas :id="'canvasQr_' + item" :width="460" :height="460"></canvas>
      </div>
    </div>
    <DialogBatchAdd ref="dialogBatchAddRef" :reload="getList" />
    <DialogBind ref="dialogBind" :reload="getList" />
    <DialogAttr ref="dialogAttr" />
    <DialogProdAttr ref="dialogProdAttr" />
    <DialogCard ref="dialogCardRef" />
    <DialogPow ref="dialogPowRef" />
    <DialogTinyQr ref="dialogTinyQr" />
    <DialogUpgrade ref="dialogUpgrade" />
  </div>
</template>

<script setup name="Dev">
import { addDev, batchGetQr, delDev, getDev, listDev, updateDev } from "@/api/equipment/dev";
import { searchStation } from "@/api/equipment/station";


import DialogBatchAdd from "@/dialog/dev/DialogBatchAdd";
import DialogBind from "@/dialog/dev/DialogBind";
import DialogAttr from "@/dialog/dev/DialogAttr";
import DialogProdAttr from "@/dialog/dev/DialogProdAttr";
import DialogCard from "@/dialog/dev/DialogCard";
import DialogPow from "@/dialog/dev/DialogPow";
import DialogTinyQr from "@/dialog/dev/DialogTinyQr";
import DialogUpgrade from "@/dialog/upgrade/DialogUpgrade";
import { ElLoading } from 'element-plus'
import QRCode from "qrcode";
import JSZip from "jszip";
import FileSaver from "file-saver";
import { read, utils } from 'xlsx'

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const { dev_status, dev_version } = proxy.useDict("dev_status", "dev_version");

const loading = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const showSearch = ref(true);
const total = ref(0);
const station_total = ref(0);
const infoList = ref([]);
const station_list = ref([]);
const title = ref("");
const open = ref(false);
const qr_id_list = ref([]);
const qr_batch_list = ref([]);
const qr_src_list = ref([]);

const data = reactive({
  form: {
    devId: null,
    devName: null,
    sn: null,
    devStatus: "OFF",
    version: "104",
    delFlag: null,
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    devName: null,
    sn: null,
    qrId: null,
    devStatus: null,
    version: null,
    stationId: null,
  },
  // 查询参数
  queryStat: {
    pageNum: 1,
    pageSize: 10,
    stationName: null,
  },
  rules: {
    devName: [
      { required: true, message: "设备名称不能为空", trigger: "blur" }
    ],
    sn: [{ required: true, message: "设备号不能为空", trigger: "blur" }],
    devStatus: [
      { required: true, message: "设备状态不能为空", trigger: "blur" }
    ],
    version: [
      { required: true, message: "设备版本不能为空", trigger: "blur" }
    ],
    delFlag: [
      { required: true, message: "启用/禁用不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, queryStat, form, rules } = toRefs(data);

/** 查询岗位列表 */
function getList() {
  loading.value = true;
  if (queryParams.value.devName == "") queryParams.value.devName = null;
  if (queryParams.value.sn == "") queryParams.value.sn = null;
  if (queryParams.value.qrId == "") queryParams.value.qrId = null;
  if (queryParams.value.devStatus == "") queryParams.value.devStatus = null;
  listDev(queryParams.value).then((response) => {
    infoList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function getStation() {
  searchStation(queryStat.value).then((response) => {
    station_list.value = response.rows;
    station_total.value = response.total;
  });
}

function remoteMethod(query) {
  if (query !== '') {
    // loading.value = true;
    setTimeout(() => {
      // loading.value = false;
      queryStat.value.stationName = query
      getStation()
    }, 200);
  } else {
    station_list.value = [];
  }
}

// 取消新增/修改按钮
function cancel() {
  open.value = false;
  reset();
}

// 新增/修改表单重置
function reset() {
  form.value = {
    devId: null,
    devName: null,
    sn: null,
    devStatus: "OFF",
    version: "104",
    delFlag: null,
  };
  proxy.resetForm("formRef");
}

// 搜索按钮操作
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

// 重置搜索框按钮操作
function resetQuery() {
  proxy.resetForm("queryForm");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.devId);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}

// 批量添加设备按钮操作
function handleBatchAdd() {
  proxy.$refs["dialogBatchAddRef"].open();
}

// 新增设备按钮操作
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加设备";
}

// 修改设备按钮操作
function handleUpdate(row) {
  reset();
  const id = row.devId || ids.value;
  getDev(id).then((response) => {
    form.value = response.data;
    form.value.delFlag = parseInt(response.data.delFlag);
    open.value = true;
    title.value = "修改设备";
  });
}

// 设备详情按钮操作
function handleInfo(row) {
  router.push({
    path: "/equipment/dev/info",
    query: { id: row.devId }
  });
}

// 绑定电站按钮操作
function handleBind(row) {
  proxy.$refs["dialogBind"].open(row);
}

// 新增/修改提交按钮
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (form.value.img && form.value.img.length > 0) {
        let imgstr = form.value.img.split(",");
        let img_list = [];
        for (let i = 0; i < imgstr.length; i++) {
          const img_item = imgstr[i];
          img_list.push(img_item);
        }
        form.value.img = img_list;
      }
      if (form.value.devId != null) {
        updateDev(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addDev(form.value).then((response) => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

// 远程控制按钮操作
function gotoControl(row) {
  router.push({
    path: "/equipment/control",
    query: { id: row.devId }
  });
}

// 查看二维码按钮操作
function tinyQrcodeRead(row) {
  proxy.$refs["dialogTinyQr"].open(row);
}

// 充电参数按钮操作
function attrRead(row) {
  proxy.$refs["dialogAttr"].open(row.devId, row.sn, row.version);
}

// 充电参数按钮操作
function attrProdRead(row) {
  proxy.$refs["dialogProdAttr"].open(row.devId, row.sn, row.version);
}


// 刷卡设置按钮操作
function cardSet(row) {
  proxy.$refs["dialogCardRef"].open(row.devId, row.sn);
}

// 升级设备按钮操作
function upgradeDev(row) {
  proxy.$refs["dialogUpgrade"].open(row.sn);
}

// 分档功率按钮操作
function powSet(row) {
  proxy.$refs["dialogPowRef"].open(row.sn);
}

// 删除设备按钮操作
function handleDelete(row) {
  const devIds = row && row.devId ? [row.devId] : ids.value;
  proxy.$modal.confirm('设备删除，会导致订单丢失等问题，是否确认删除？')
    .then(function () {
      return delDev(devIds);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {
    });
}

function handleExportMulti() {
  const ids = ids.value;
  let loadingInstance = ElLoading.service({
    lock: true,
    body: true,
    text: "正在生成，请耐心等待",
    background: "rgba(0, 0, 0, 0.7)",
  });
  qr_id_list.value = []
  qr_batch_list.value = []
  qr_src_list.value = []
  batchGetQr(ids).then((response) => {
    qr_id_list.value = response.data
    qr_batch_list.value = []
    console.log("开始生成", new Date())
    for (let i = 0; i < qr_id_list.length; i++) {
      setTimeout(() => {
        let tiny_str = "https://opr.gtcharger.com?qrid=" + qr_id_list.value[i];
        createQrcode(tiny_str, i)
      }, 60 * (i + 1));
    }
    setTimeout(() => {
      loadingInstance.close();
      saveZip()
      console.log("结束生成", new Date())
    }, 95 * qr_id_list.value.length);
  }).catch((error) => {
    loadingInstance.close();
  });
}

function uploadExcel(file, fileList) {
  const files = { 0: file.raw }// 取到File
  readExcel(files)
}

function readExcel(files) { // 表格导入
  qr_id_list.value = []
  qr_batch_list.value = []
  qr_src_list.value = []
  if (files.length <= 0) { // 如果没有文件名
    return false
  } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
    proxy.$Message.error('上传格式不正确，请上传xls或者xlsx格式')
    return false
  }
  const fileReader = new FileReader()
  fileReader.onload = (files) => {
    try {
      const data = files.target.result
      const workbook = read(data, {
        type: 'binary'
      })
      const wsname = workbook.SheetNames[0]// 取第一张表
      const ws = utils.sheet_to_json(workbook.Sheets[wsname])// 生成json表格内容
      // console.log(ws, 'ws是表格里的数据，且是json格式')
      qr_id_list.value = formatExcel(ws)
      handleExport()
      // 重写数据
      proxy.$refs.upload.value = ''
      // return ws
    } catch (e) {
      console.log(e)
      return false
    }
  }
  fileReader.readAsBinaryString(files[0])
}

function formatExcel(data) {
  let file = []
  for (const key in data) {
    const element = Object.values(data[key]);
    for (let i = 0; i < element.length; i++) {
      if ((typeof element[i] == 'string') && (/^[0-9]+$/.test(element[i])) || (typeof element[i] == 'number')) {
        file.push(element[i])
      }
    }
  }
  return file
}

function handleExport() {
  let loadingInstance = ElLoading.service({
    lock: true,
    body: true,
    text: "正在生成，数量过多，请耐心等待",
    background: "rgba(0, 0, 0, 0.7)",
  });
  qr_batch_list.value = []
  console.log("开始生成", new Date())
  for (let i = 0; i < qr_id_list.value.length; i++) {
    setTimeout(() => {
      let tiny_str = "https://opr.gtcharger.com?qrid=" + qr_id_list.value[i];
      createQrcode(tiny_str, i)
    }, 60 * (i + 1));
  }
  setTimeout(() => {
    loadingInstance.close();
    saveZip()
    console.log("结束生成", new Date())
  }, 95 * qr_id_list.value.length);
}

function handleExportAll() {
  let loadingInstance = ElLoading.service({
    lock: true,
    body: true,
    text: "正在生成，数量过多，请耐心等待",
    background: "rgba(0, 0, 0, 0.7)",
  });
  qr_id_list.value = []
  qr_batch_list.value = []
  qr_src_list.value = []
  batchGetQr([]).then((response) => {
    qr_id_list.value = response.data
    qr_batch_list.value = []
    console.log("开始生成", new Date())
    for (let i = 0; i < qr_id_list.value.length; i++) {
      setTimeout(() => {
        let tiny_str = "https://opr.gtcharger.com?qrid=" + qr_id_list.value[i];
        createQrcode(tiny_str, i)
      }, 60 * (i + 1));
    }
    setTimeout(() => {
      loadingInstance.close();
      saveZip()
      console.log("结束生成", new Date())
    }, 95 * qr_id_list.value.length);
  }).catch((error) => {
    loadingInstance.close();
  });

}

function createQrcode(str, index) {
  QRCode.toDataURL(str, { errorCorrectionLevel: "H" })
    .then((url) => {
      qr_src_list.value.push(url.replace(/[\r\n]/g, ""));
    })
    .catch((err) => {
      ElNotification({
        message: "二维码生成错误" + err,
        type: "error",
      });
      return;
    });
  setTimeout(() => {
    console.log("获取" + qr_id_list.value[index])
    drawQrcode(index);
  }, 30 * (index + 1));
}

function drawQrcode(index) {
  let canvas = document.getElementById("canvasQr_" + qr_id_list.value[index]);
  let ctx = canvas.getContext("2d"); //创建画布
  let img = new Image(); //因为拿不到图片静态资源，所以创建图片标签
  img.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前，否贼大部分浏览器会报错
  img.src = qr_src_list.value[index];
  //加载图片
  let x = qr_id_list.value[index].toString().length;
  img.onload = () => {
    //绘制图片
    ctx.drawImage(img, 0, 0, 460, 460);
    //字体大小
    ctx.font = "32px Arial";
    //字体填充颜色
    ctx.fillStyle = "black";
    //字体文字，显示位置
    ctx.fillText(qr_id_list.value[index], 230 - x * 5, 450);
    //合成图片
    let imgUrl = canvas.toDataURL("image/jpg");
    qr_src_list.value[index] = imgUrl;
    qr_batch_list.value.push(qr_src_list.value[index])
    console.log(qr_id_list.value[index] + "绘画完成")
  };
}

function saveZip() {
  let loading = Loading.service({
    lock: true,
    body: true,
    text: "正在下载，请耐心等待",
    background: "rgba(0, 0, 0, 0.7)",
  });
  // 配合我的方法使用的参数 不需要直接去掉
  var blogTitle = "二维码_" + Date.now();
  var zip = new JSZip();
  var imgs = zip.folder(blogTitle);
  var baseList = []; //需要压缩图片的路径
  // 要下载图片的url
  var arr = [];
  // 下载后图片的文件名，个数应与arr对应
  var imgNameList = []; //单张图片名称
  for (let i = 0; i < qr_id_list.value.length; i++) {
    imgNameList.push(qr_id_list.value[i]);
    arr.push(qr_batch_list.value[i]);
  }
  for (var i = 0; i < arr.length; i++) {
    let image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute("crossOrigin", "anonymous");
    image.onload = function () {
      let canvas = document.createElement("canvas");
      canvas.width = image.width;
      canvas.height = image.height;
      let context = canvas.getContext("2d");
      context.drawImage(image, 0, 0, image.width, image.height);
      let url = canvas.toDataURL(); // 得到图片的base64编码数据
      canvas.toDataURL("image/png");
      baseList.push(url.substring(22)); // 去掉base64编码前的 data:image/png;base64,
      if (baseList.length === arr.length && baseList.length > 0) {
        for (let k = 0; k < baseList.length; k++) {
          imgs.file(imgNameList[k] + ".png", baseList[k], { base64: true });
        }
        zip.generateAsync({ type: "blob" }).then(function (content) {
          // see FileSaver.js
          FileSaver.saveAs(content, blogTitle + ".zip");
        });
      }
    };
    image.src = arr[i];
  }
  loading.close()
}

getList();
getStation();
</script>
